<!-- 名片详情 -->
<template>
	<view v-if="init">
		<TemplateOne ref="detailRef" :data="dataForm" @refreshPage="refreshPage" @onShare='openshare' :card_id='card' v-if="dataForm.style == '0'" />
		<!-- 默认风格 -->
		<TemplateTwo :data="dataForm" @refreshPage="refreshPage" @onShare='openshare' :card_id='card' v-if="dataForm.style == '1'" />
		<!-- 蓝色风格 -->
		<TemplateThree :data="dataForm" @refreshPage="refreshPage" @onShare='openshare' :card_id='card' v-if="dataForm.style == '2'" />
		<!-- 黄色风格 -->
		<TemplateFour :data="dataForm" @refreshPage="refreshPage" @onShare='openshare' :card_id='card' v-if="dataForm.style == '3'" />
		<!-- 橙色风格 -->
		<templateFive :data="dataForm" @refreshPage="refreshPage" @onShare='openshare' :card_id='card' v-if="dataForm.style == '4'" />
		<!-- 绿色风格 -->
		<templateSix :data="dataForm" @refreshPage="refreshPage" @onShare='openshare' :card_id='card' v-if="dataForm.style == '5'" />
		<!-- 棕色风格 -->
		<recom-prod v-if="dataForm.fk_users_id > 0" ref="recom_prod" :userId="dataForm.fk_users_id"></recom-prod>
		<card-sidebar v-model="showshare"  zIndex='1000' :prodInfo='dataForm'></card-sidebar>
		<template v-if="isShare">
			<view class="bottom-tabbar-line"></view>
			<view class="bottom-tabbar">
				<view class="bottom-tabbar-left  f-c-c flex-1">
					<view class="bottom-tabbar-left-item f-c-c  flex-1" v-for="(item, index) in list" :key="index" @click="onClick(item)">
						<u-icon :name="item.image" class="bottom-tabbar-left-img"></u-icon>
						<view class="">{{ item.name }}</view>
						<button class="share" type="default" open-type="share" v-if="item.share"></button>
					</view>
				</view>
				<view class="bottom-tabbar-right f-c-c" @click="addPhone(dataForm)">存入通信录</view>
			</view>
		</template>
		<sww-login></sww-login>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { uniModal, uniToast } from '@/utils/uniPromise.js';
import { pageShare } from '@/mixins/pageShare.js';
import TemplateOne from '../home-template/template-one.vue';
import TemplateTwo from '../home-template/template-two.vue';
import TemplateThree from '../home-template/template-three.vue';
import TemplateFour from '../home-template/template-four.vue';
import templateFive from '../home-template/template-five.vue';
import templateSix from '../home-template/template-six.vue';
import recomProd from '../components/recomProd/index.vue'
import cardSidebar from '../card-item/card-sidebar.vue';
import { formatDate } from '@/utils/moment/index.js';
export default {
	mixins: [pageShare],
	components: {
		TemplateOne,
		TemplateTwo,
		TemplateThree,
		TemplateFour,
		templateFive,
		templateSix,
		'recom-prod':recomProd,
		cardSidebar
	},
	data() {
		return {
			isShare:false, // 是否分享进来的，有可能是从关注列表、粉丝列表进来的
			showshare:false,
			dataForm: {}, //内容数据
			card: '', //名片ID
			list: [
				{
					name: '回到首页',
					image: 'home',
					params: 'index' //触发方法携带参数
				},
				{
					name: '分享名片',
					image: 'zhuanfa',
					share: true //分享按钮
				},
				{
					name: '制作名片',
					image: 'calendar',
					params: '/package/business-card/index' //触发方法携带参数
				}
			],
			browTime: 0,
			init:false
		};
	},
	onLoad(options) {
		let { id } = options;
		if(!options.noShare){
			// 别人分享进来的 / 从底部栏菜单进来 sww-card
			this.isShare = true
			uni.setStorage({
			    key: 'shareCard_id',
			    data: Number(id),
				success:(res)=>{
					console.log('加载',res)
				}
			})
		}
		if (id) {
			this.card = id;
			this.initPage();
			// 记录开始浏览时间
			this.getBrowTime();
		}
	},
	onUnload() {
		if (this.browTime && this.$isLogin()) {
			this.addBrow(this.dataForm.pk_id);
		}
	},
	onShareAppMessage: function() {
		return {
			title: `${this.dataForm.name}的名片，推荐看看`,
			path: `/package/business-card/share-card/index?id=${this.card}`
		};
	},
	onShareTimeline: function() {
		return this.getShareTimeline();
	},
	onPageScroll: function(scrollTop) {
		if (!!this.$refs.detailRef) {
			this.$nextTick(() => {
				this.$refs.detailRef.$onPageScroll(scrollTop);
			});
		}
	},
	onReachBottom() {
		if (!!this.$refs.recom_prod) {
			this.$nextTick(() => {
				this.$refs.recom_prod.$onReachBottom();
			});
		}
	},
	methods: {
		// 记录开始浏览时间
		getBrowTime() {
			this.browTime = new Date().getTime();
		},
		// 新增浏览记录
		addBrow(prodId) {
			if (this.$isLogin() && this.card) {
				let date = new Date();
				let duration = parseInt((date.getTime() - this.browTime) / 1000);
				date = formatDate(date, 'YYYY-MM-DD HH:mm:ss');
				if(this.vuex_user.card_id == this.card) return //如果是自己看自己就不需要增加浏览记录
				this.$resPost('AddUsersBrowse', { type: 8, product_id: this.card, date_time: date, duration: duration }).catch(() => {});
				
			}
		},
		openshare(){
			this.showshare = true
		},
		refreshPage () {	
			this.initPage()
		},
		// 手机存入通信录
		addPhone(item) {
			if (!item) {
				return
			}
			this.$login('addPhone').then(() => {
				let {
					email,
					address,
					company,
					duties,
					logo,
					name,
					phone,
					weixin
				} = item
				wx.addPhoneContact({
					firstName: name,
					mobilePhoneNumber: phone,
					weChatNumber: weixin,
					organization: company,
					title: duties,
					workPhoneNumber: phone,
					email: email,
					homeAddressStreet: address
				})
		
			})
		},
		onClick(item) {
			if (item.params) {
				this.$linkTo(item.params);
			}
		},
		// 初始化页面
		initPage() {
			// this.$login('initPage').then(res => {
				this.init = false
				// uni.pageScrollTo({
				// 	scrollTop: 215,
				// 	duration: 0
				// });
				this.$resPost('GetCallingCardList', {
					pk_id:this.card,
					users_id: undefined, //查別人的不能传users_id,
					relation_users_id: this.vuex_user.pk_id || undefined
				}).then(({ data }) => {
					if(data[0]){
						this.init = true
						if(!!data[0].img){
							data[0].imgList = data[0].img.split(',');
						} 
						this.dataForm = data[0] || {}
						if (this.dataForm.style == '0') {
							this.pageScrollTo()
						}
					}else{
						this.$toast({title:'没有找到名片'})
					}
				});
			// });
		},
		// 将页面向上滚动215像素
		pageScrollTo() {
			this.$nextTick(function() {
				uni.pageScrollTo({
					scrollTop: 215,
					duration: 0
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.bottom-tabbar-line {
	width: 100%;
	height: 150rpx;
}
.bottom-tabbar {
	display: flex;
	justify-content: space-between;
	background-color: #f5f5f5;
	width: 100%;
	height: 110rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999;
}
.f-c-c {
	display: flex;
	align-items: center;
	justify-content: center;
}
.bottom-tabbar-left-item {
	position: relative;
	font-size: 22rpx;
	flex-direction: column;
	.bottom-tabbar-left-img {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 10rpx;
		font-size: 40rpx;
		color: #f4492e;
	}
}
.share {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.bottom-tabbar-right {
	width: 300rpx;
	background-color: $sww-theme-color;
	color: #fff;
	font-size: 32rpx;
}
</style>
